<template>
  <div class="home1">
    <!-- <van-sticky>
      <van-nav-bar :title="$route.meta.title" style="width:100%" />
    </van-sticky> -->
    <div class="home1-carousel">
      <Carousel />
    </div>
    <!-- <div v-if="utype==0"> -->
    <div class="home1-content">
      <div class="home1-content-allshop" @click="toJoin(4)" v-if="utype==0">
        <div>{{joins}}</div>
        <div>所有加盟商</div>
      </div>
      <div class="home1-content-allshop" @click="toJoin(1)" v-if="utype==4">
        <div>{{shoplist.length}}</div>
        <div>所有店铺</div>
      </div>
      <div class="home1-content-wait" @click="toShopList(1)">
        <div>{{waits}}</div>
        <div>待审批店铺</div>
      </div>
    </div>
    <div class="home1-notice" v-if="waits!=0">
      <van-notice-bar left-icon="volume-o" scrollable delay="2" speed="60" @click="toShopList(1)">
        温馨提示：当前有 {{waits}} 个店铺待审批，请前往处理
      </van-notice-bar>
    </div>
    <!-- </div> -->
    <van-cell-group class="home1-shop-t" :border="false">
      <van-cell title="店铺列表" value="更多" is-link value-class="more-shops" @click="toJoin(1)" />
    </van-cell-group>
    <van-cell-group class="home1-shoplist" :border="false">
      <van-cell v-for="(item,idx) in shoplist" :key="idx" :title="item.shopname" :value="item.state==1?'营业中':'打烊'" />
    </van-cell-group>
    <van-divider v-if="shoplist.length != 0" style="width:80%;margin:0.5rem auto;">到底啦！</van-divider>
    <van-empty description="暂无店铺" v-if="shoplist.length == 0" />
    <div style="height:1.5rem;"></div>
    <TabBar :curr="0" />
  </div>
</template>

<script>
import TabBar from "@/components/TabBar";
import Carousel from '../home/carousel'
export default {
  name: 'Home1',
  data () {
    return {
      utype: '',
      joins: 0,
      waits: 0,
      shoplist: [],
      spf_id: '',
    }
  },
  methods: {
    toJoin (id) {
      this.$router.push({ path: `/shoplist/${id}` })
    },
    // 审批列表
    toShopList (active) {
      this.$router.push({ path: "/join", query: { active: active, } })
    },
    shopListNum () {
      // 待审批列表
      this.$axios("/index/checkshopslist", {
        state: 1, //1-提交申请；2-审核通过；3-审核失败
      })
        .then(res => {
          this.waits = res.data.data.length
        })
      // 加盟商列表
      this.$notoken("/subplat/getsubplatlist", {
        type: 1, //1-只用于下拉框；2-返回全部参数
      })
        .then(res => {
          this.joins = res.data.data.length
        })
      // 店铺列表
      this.$axios("/shops/getshopslist", {
        page: 1,//分页页码
      })
        .then(res => {
          if (this.spf_id == 0) {
            // 渲染所有店铺
            this.shoplist = res.data.data.rs
          } else {
            // 渲染绑定了当前加盟商账号的店铺
            this.shoplist = res.data.data.rs.filter(item => {
              return item.spf_id == this.spf_id
            })
          }
        })
    },
  },
  created () {
    this.spf_id = JSON.parse(localStorage.getItem("userInfo")).user.spf_id
    this.utype = JSON.parse(localStorage.getItem("userInfo")).user.utype
    this.shopListNum()
  },
  components: {
    TabBar,
    Carousel,
  }
}
</script>

<style lang="less" scoped>
.home1 {
  display: flex;
  flex-direction: column;
  &-carousel {
    margin: 20px 0;
  }
  &-content {
    display: flex;
    justify-content: center;
    margin: 10px 25px;
    &-allshop,
    &-wait {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      text-align: center;
      width: 50%;
      height: 180px;
      margin: 15px;
      padding: 20px;
      box-sizing: border-box;
      font-weight: bold;
      font-size: 35px;
      color: #fff;
    }
    &-allshop {
      background: url('../../assets/home/approve.png') no-repeat;
      background-size: contain;
    }
    &-wait {
      background: url('../../assets/home/approveing.png') no-repeat;
      background-size: contain;
    }
  }
  &-shop-t {
    margin-top: 20px;
    .more-shops {
      font-size: 25px;
    }
    /deep/ .van-cell {
      padding-top: 10px;
      padding-bottom: 10px;
    }
    /deep/ .van-cell__title {
      font-weight: bold;
      font-size: 35px;
    }
  }
  &-shoplist {
    /deep/ .van-cell {
      font-size: 25px;
      padding: 20px 50px;
    }
  }
}
</style>